/**
 * OMS客户选择弹框
 */
import PopupSelection from '../../el/ItemComponent/PopupSelection';
import React from 'react';
import requests from '@/utils/request';
import { ElNotification } from '@/components/el';
import { ElFormProps } from '@/components/el/ElForm';
import { ElSearchTableColumns } from '@/components/el/ElSearchTable';
import { asserts } from '@/utils';
interface Props {
  value?: any;
  // onChange?: Function;
  defaultUserId?: number | string;
  [index: string]: any;
}
interface State {
  popupSelection: any;
}

/**
 * 表格配置项
 * @returns
 */
const columns = (): Array<ElSearchTableColumns> => [
  {
    title: '编号',
    width: 170,
    dataIndex: 'custCode',
    align: 'left'
  },
  {
    title: '名称',
    width: 200,
    dataIndex: 'custName',
    align: 'left'
  },
  {
    title: '简称',
    width: 200,
    dataIndex: 'custAbbr',
    align: 'center'
  },
  {
    title: '类型',
    width: 200,
    dataIndex: 'custTypeName',
    align: 'center'
  },
  {
    title: '所属公司',
    width: 200,
    dataIndex: 'ouName', //无
    align: 'center'
  }
];

// 在此处组装所有的数据
class CustomerPopupSelection extends React.Component<Props, State> {
  constructor(props) {
    super(props);
    this.state = {
      popupSelection: null // 通过ref获取inputValue   popupSelection.state.inputValue
    };
  }

  onRef: any; //组件ref

  /**
   * 搜索条件
   */
  getTableSearchFormItems = (): ElFormProps => {
    const ouIdIsDisabled =
      typeof this.props?.getbasicFormValueFunction === 'function'
        ? this.props?.getbasicFormValueFunction()?.basicFormValue?.ouId
        : false; //控制公司是否隐藏或者禁用
    return {
      wrapperCol: { span: 18 },
      labelCol: { span: 6 },
      items: [
        {
          title: '客户',
          name: 'custData',
          span: 6,
          formOption: {
            type: '$input',
            props: { placeholder: '请输入编号/名称' }
          }
        },
        {
          title: '类型',
          name: 'custType',
          span: 6,
          formOption: {
            type: '$udc',
            props: {
              placeholder: '请选择',
              prefixStr: '/yst-system',
              domain: 'CRM',
              udc: 'CUST_TYPE'
            }
          }
        },
        {
          title: '公司',
          name: 'ouId',
          span: 6,
          hidden: ouIdIsDisabled,
          formOption: {
            type: '$mg-select-ou',
            props: {
              placeholder: '请选择',
              disabled: ouIdIsDisabled
            }
          }
        }
      ]
    };
  };
  /**
   * 分页请求
   * @param formData
   * @returns
   */
  request = async (formData) => {
    if (this.props?.getbasicFormValueFunction) {
      const { basicFormValue } = this.props?.getbasicFormValueFunction();
      if (asserts.isExist(basicFormValue?.ouId)) {
        formData = {
          ...formData,
          ouId: basicFormValue?.ouId
        };
      }
    }
    return requests('/yst-sale/crm/cust/queryCustPlugIn', {
      method: 'post',
      query: {
        ...formData,
        agentEmpId: this.props?.defaultUserId,
        orders: [{ asc: false, column: 'createTime' }]
      }
    });
  };

  /**
   * 分页查询失败回调
   * @param res
   */
  errCallBack = (res) => {
    console.log('res', res);
    ElNotification({
      type: 'error',
      message: res.msg || res.data || '操作失败！'
    });
  };

  render() {
    return (
      <>
        <PopupSelection
          rowKey='custId'
          modalTitle='请选择客户'
          // scroll={{ x: 'max-content' }}
          defaultSearchData={{
            ouId:
              typeof this.props?.getbasicFormValueFunction === 'function'
                ? this.props?.getbasicFormValueFunction()?.basicFormValue?.ouId
                : undefined //ouid默认值控制
          }}
          tableProxy={{
            request: this.request,
            errCallBack: this.errCallBack,
            props: {
              success: 'success',
              result: 'data.records',
              total: 'data.total'
            },
            autoLoad: true
          }}
          modalTableColumns={columns()}
          columns={columns()}
          searchFormProps={this.getTableSearchFormItems()}
          needModal={true}
          onRef={this.onRef}
          keywords='custData'
          // value={this.props.value}
          // onChange={this.props.onChange}
          overLayWidth={600}
          defaultUserId={this.props?.defaultUserId}
          {...this.props}
        />
      </>
    );
  }
}
export default CustomerPopupSelection;
